<template>
<!--  边坡排查项配置-->
  <div class="page">

    <div class="page_main">
      <div class="toolbars">
        <el-button type="primary" plain size="big" icon="el-icon-plus" class="tag-add"
                   @click="handleAddTagMenu()">新建排查大项
        </el-button>
      </div>
      <div class="tag-menu-list">
        <div class="tag-menu-list-item level-bdcolor-2" v-for="(item,index) in tableList" :key="index">
          <div class="tag-menu-head clearfloat">
            <span class="tag-menu-title">{{item.name}}</span>
            <el-button type="danger"  size="mini" icon="el-icon-remove"
                       @click="confirmDelete(item.id)" >
              删除排查大项
            </el-button>
            <el-button type="primary"  size="mini" icon="el-icon-plus"
                       @click="handleAddTag(item.id)" >
              新建排查项
            </el-button>
          </div>
            <el-tag type="info" v-for="(subItem,subIndex) in item.item"
                    :key="subIndex" closable class="tag-label" size="medium"
                    @close="handleDeleteTag(subItem.id)">
             {{subIndex+1}}.{{subItem.name}}
            </el-tag>
        </div>
      </div>

      <!-- 新增编辑弹窗 -->
      <el-dialog
        :close-on-click-modal="false"
        :title="dialogTitle"
        :visible.sync="isShowDialog"
        width="600px">
        <!-- 具体form表单 -->
        <el-form label-position="right" ref="form" :rules="rules" :model="form" label-width="120px"
                 class="form_width-200">
          <el-form-item :label="labelName" prop="name">
            <el-input v-model.trim="form.name" placeholder="请输入名称" style="width: 400px"></el-input>
          </el-form-item>
        </el-form>
        <!-- 操作按钮 -->
        <span slot="footer" class="dialog-footer">
        <el-button class="common_btn-white" @click="isShowDialog = false;form={}">取消</el-button>
        <el-button class="common_btn-defalut" type="primary" @click="validateForm">确定</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {addSlopeInvestigate, getSlopeInvestigateList,tagDelete} from '@/services/model/investigation'

// form表单校验规则
const RULES = {
  name: {required: true, message: '请输入名称'},
}

export default {
  data() {
    return {
      // 表单
      form: {},
      rules: RULES,
      // 展示弹窗
      isShowDialog: false,
      tableList: [],
      labelName: '',
      dialogTitle: '',
    }
  },
  mounted() {
    this.queryList()
  },
  methods: {
    // 数据查询
    async queryList() {
      const {data} = await getSlopeInvestigateList()
      this.tableList = data || []
    },
    // 确认删除
    confirmDelete(id) {
      this.$confirm(`即将删除该类及其下所有标签, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDeleteTagMenu(id)
      })
    },
    //删除标签类
    async handleDeleteTagMenu(id) {
      // await tagMenuDelete({id:id})
      // this.$notify({
      //   type: 'success',
      //   title: '提示',
      //   message:'删除成功'
      // })
      this.queryList()
    },
    //删除标签
    async handleDeleteTag(id) {
      await tagDelete({id:id})
      this.$notify({
        type: 'success',
        title: '提示',
        message:'删除成功'
      })
      this.queryList()
    },
    // 新增标签类型
    handleAddTagMenu() {
      this.isShowDialog = true
      this.dialogTitle = '新增排查大项'
      this.labelName = '排查大项名称:'
      this.form.parentId = null
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    // 新增标签
    handleAddTag(id) {
      this.isShowDialog = true
      this.dialogTitle = '新增排查项'
      this.labelName = '排查项名称:'
      this.form.parentId = id
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    // 表单提交
    validateForm() {
      this.$refs.form.validate((valid) => {
        valid && this.submitData()
      })
    },
    // 新增编辑提交数据
    async submitData() {
      // 根据ID判断使用新增还是编辑
      await addSlopeInvestigate(this.form)
      this.$notify({
        type: 'success',
        title: '提示',
        message: '添加成功'
      })
      this.isShowDialog = false
      this.form = {}
      this.queryList()
    },
  }
}
</script>
<style lang="less" scoped>
  .page {
    padding: 24px;

    .tag-menu-list {
      padding: 20px;
      margin-bottom: 20px;
    }

    .level-bdcolor-2 {
      border-color: #E4E7ED;
    }

    .tag-add {
      border-color: transparent;
      color: white;
      background-color: #1990FE;

    }

    .tag-remove {
      border-color: #C2E7B0;
      color: #67C23A;
      background-color: #E5F6DD;
      margin-left: 20px;
    }

    .tag-label {
      border: none;
      line-height: 32px;
      font-weight: bold;
    }

    .tag-menu-list-item {
      border-width: 0 0 1px 0;
      margin-top: 20px;
      padding-bottom: 10px;
      .tag-label{
        margin-left: 20px;
        margin-top: 10px;
      }
    }

    .tag-menu-list-item:last-child {
      border-width: 0 0 0 0;
    }

    .tag-menu-head {
      font-size: 16px;
      padding: 10px 10px;
      margin-bottom: 20px;
      border-bottom: 1px solid grey;
      .el-button.el-button--mini{
        margin-left: 15px;
        float: none;

      }
    }

    .tag-menu-head .el-button {
      float: right;
    }

    .tag-detail {
      padding: 10px 0;
    }

    .page_top {
      font-weight: 600;
      font-size: 20px;
      color: #23252C;
      background-color: #ffffff;
      height: 50px;
      padding: 0 20px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      margin-bottom: 16px;
    }
  }

  .page_header {
    padding: 10px 40px;
    background-color: #EEF4FF;
    color: #6680C1;

    & > em {
      padding-left: 20px;
    }

    .page_header-wrap {
      width: 70vw;
      display: flex;

      & > div {
        padding-left: 20px;
      }
    }
  }
</style>
